<template>
	<view class="container" :data-theme="theme">
		<view class="header">
			<view class="header-top">
				<uni-segmented-control :current="navIndex" :values="navList" class="header-top-left" styleType="text"
					:activeColor="bgColor" @clickItem="clickNavIndex"></uni-segmented-control>
				<view class="header-top-right">
					<uni-icons type="help"></uni-icons>
					上传指引
				</view>
			</view>

		</view>

		<view class="content">
			<!-- 这里是可滚动的内容 -->
			<swiper :duration="300" class="scroll-view" :current="navIndex" @change="changeNavIndex">
				<swiper-item>
					<scroll-view class="scroll-view" scroll-y>
						<proceedUpload :navIndex="navIndex" ref="proceedUploadRefs"></proceedUpload>
						<!-- <view v-for="item in 100"  >{{item}}</view> -->
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view class="scroll-view" scroll-y>
						<ticketUpload :navIndex="navIndex" ref="ticketUploadRefs"></ticketUpload>
					</scroll-view>
				</swiper-item>
			</swiper>

		</view>
	</view>
</template>
<script>
	import {
		setThemeColor
	} from '../../utils/setTheme';
	import ticketUpload from "./components/ticketUpload.nvue"
	import proceedUpload from "./components/proceedUpload.vue"
	let app = getApp()
	export default {
		components: {
			ticketUpload,
			proceedUpload
		},
		data() {
			return {
				bgColor: '#fff',
				theme: app.globalData.theme,
				// 导航下标
				navIndex: 0,
				// 导航列表
				navList: ["进行中", '历史票证'],
			}
		},
		onLoad(options) {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
		},
		onShow() {
			this.handleProceedUpload(true)
		},
		methods: {
			// 获取进行中的列表
			handleProceedUpload(status) {
				this.$nextTick(() => {
					this.$refs.proceedUploadRefs.$refs.productRefs.getTicketUploadList(status)
				})
			},

			// 点击导航事件
			clickNavIndex(e) {
				this.navIndex = e.currentIndex
			},

			// 改变滑动页面
			changeNavIndex(e) {
				this.navIndex = e.detail.current
			}
		}
	}
</script>
<style lang="scss" scoped>
	page {
	width: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.header {
		.header-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: white;
			padding: 20rpx;

			.header-top-left {
				width: 60%;
			}

			.header-top-right {
				display: flex;
				align-items: center;
			}
		}


	}


	.content {
		flex: 1;
		overflow: hidden;
	}

	.scroll-view {
		height: 100%;
	}

	

	.scroll-view-inner {
	}
</style>